// 顶部导航菜单 用tabs实现
<template>
  <el-row class="main">
    <nav-header></nav-header>
    <el-row>
      <el-col class="siderbar">
        <el-row>
          <div class="info-title">账号信息</div>
        </el-row>
        <el-row class="user" style="margin-top:0;" v-if="memberGameAccount">
          <el-row>
            <el-col :span="12" class="info-left">账&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号:</el-col>
            <el-col :span="12" class="info-right">{{memberGameAccount.username}}({{memberGameAccount.handicaps}})</el-col>
          </el-row>
          <el-row>
            <el-col :span="12" class="info-left">可用额度:</el-col>
            <el-col :span="12" class="info-right">{{memberGameAccount.remaining_amount}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="12" class="info-left">未结金额:</el-col>
            <el-col :span="12" class="info-right">{{memberGameAccount.unsettled_amount}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="12" class="info-left">当天盈利:</el-col>
            <el-col :span="12" class="info-right">{{memberGameAccount.daily_win}}</el-col>
          </el-row>
        </el-row>

        <el-row>
          <el-row class="info-title">最新注单</el-row>
          <el-row class="period" v-if="memberLastOrder"> {{memberLastOrder.period}}期 </el-row>
        </el-row>
          <el-row class="zhudan" style="margin-top:0;overflow:auto; max-height: 400px;" v-if="memberLastOrder">
            <el-row class="item" v-for="(value,key,index) in memberLastOrder.new" :key="`${index}${key}`">
              <el-row>
                <el-col :span="8" class="info-left">注单号:</el-col>
                <span style="margin-top:5px;display:inline-block;color:#119400;">{{value.注单号}}</span>
              </el-row>
              <el-row>
                <el-col  :span="24" v-for="item in value.内容" class="info-right" style="color:#0017C7;text-align:center;margin-top: 5px">{{item}}</el-col>
              </el-row>
              <el-row>
                <el-col :span="10" class="info-left" style="margin-top: 5px">下注金额:</el-col>
                <el-col :span="14" class="info-right" style="margin-top: 5px">{{value.下注金额}}</el-col>
              </el-row>
              <el-row>
                <el-col :span="10" class="info-left">可赢金额:</el-col>
                <el-col :span="14" class="info-right">{{value.可赢金额}}</el-col>
              </el-row>
            </el-row>

            <el-row class="total">
              <el-row>
                <el-col :span="12" class="info-left">合计下注:</el-col>
                <el-col :span="12" class="info-right">{{memberLastOrder.count}}笔</el-col>
              </el-row>
              <el-row>
                <el-col :span="12" class="info-left">合计金额:</el-col>
                <el-col :span="12" class="info-right">{{memberLastOrder.total_amount}}</el-col>
              </el-row>
            </el-row>
          </el-row>
      </el-col>
      <el-col class="main-contain">
        <app-main></app-main>
      </el-col>
    </el-row>
    <el-row class="bottom">
      <el-col :span="23">
        <marquee class="info" scrollamount="2">底部滚动通知</marquee>
      </el-col>
      <el-col :span="1">
        <div class="info more">更多</div>
      </el-col>
    </el-row>
  </el-row>
</template>

<script>
import { mapGetters } from 'vuex'
import AppMain from '@/views/member/components/AppMain'
import NavHeader from '@/views/member/components/NavHeader'

export default {
  name: 'layout',
  data() {
    return {}
  },
  computed: {
    ...mapGetters([
      'memberGameAccount',
      'memberPages',
      'memberLottery',
      'memberLastOrder',
    ]),
  },
  async created() {
    console.log('5588',this.memberLastOrder)
    await this.$store.dispatch('MemberOrdersRaw', { page: 2 })
  },
  components: {
    AppMain,
    NavHeader,
  },

  methods: {},
}
</script>

<style  rel="stylesheet/scss" lang="scss" scoped>
.main {
  background-color: #f2f2f2;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
  min-height: 100vh;
  min-width: 1155px;
  padding-bottom: 28px;

  .siderbar {
    background-color: #f2f2f2;
    min-height: 80vh;
    background-size: 100% 100%;
    width: 190px;
    .el-row {
      margin-top: 4px;
    }
    .info-title {
      font-weight: 700;
      height: 30px;
      line-height: 30px;
      text-align: center;
      margin: 0px 8px 0 8px;
      background: url(/static/member/images/skin/blue/bg-sprites.png) repeat-x 0 -58px;
    }
    .user {
      background-color: #fff;
      margin: 0 8px;
      padding: 8px 0;
      border: 1px solid rgb(195, 230, 244);
      .info-left {
        text-align: right;
        padding-right: 10px;
      }
      .info-right {
        /* color: #fff; */
      }
    }

    .period {
      @extend .info-title;
      text-align: center;
      background: rgb(195, 230, 244);
      color: #fff;
      height: 25px;
      line-height: 25px;
      border-top: 1px solid #fff;
    }
    .zhudan {
      @extend .user;
      .item {
        border-bottom: 1px solid rgb(195, 230, 244);
        padding-bottom: 13px;
        font-size: 10px;
      }
    }
  }

  .main-contain {
    width: 940px;
    .app-main {
      background-color: #fff;
      min-height: 80vh;
    }
  }

  .bottom {
    background-color: rgb(12, 62, 108);
    position: fixed;
    bottom: 0px;
    width: 100%;
    .el-col {
      .info {
        margin: 0;
        border: none;
        height: 27px;
        line-height: 27px;
        font-weight: bold;
        font-size: 14px;
        color: #fff;
      }
      .more {
        text-align: center;
        cursor: pointer;
      }
    }
  }
}
</style>
